<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>．ｑｕａｓｉｍｏｎｏ．</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Ctext%20x='0'%20y='14'%20fill='white'%3Eｑ%3C/text%3E%3C/svg%3E" type="image/svg+xml" />

<style>
   body {
      background-color: rgb(21, 32, 43);
      color: white;
      font-family: sans-serif;
      font-size: 20px;
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      justify-content: center;
      align-items: center;
      text-align: center;
   }
   body:before {
      content: "．ｑｕａｓｉｍｏｎｏ．";
      position: fixed;
      bottom: 4px;
      right: 8px;
      z-index: -1;
      font-size: 10px;
   }
   small {
      font-size: 14px;
      margin-top: 4px;
   }
   #grid {
      display: inline-grid;
      color: white;
      grid-gap: 2px;
      border: 1px solid rgb(56, 68, 77);
      border-radius: 4px;
      padding: 4px;
      background-color: rgb(21, 32, 43);
   }
   #grid span {
      border: 1px solid rgb(56, 68, 77);
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      -webkit-user-modify: read-write-plaintext-only;
      transition: transform 0.2s ease-in-out;
   }
   #grid span:focus {
      transform: scale(1.25);
      outline: 0;
      border-color: white;
      background-color: rgb(21, 32, 43);
   }
   #tweet {
      border: 1px solid rgb(56, 68, 77);
      border-radius: 4px;
      min-width: 270px;
      min-height: 270px;
      padding: 4px;
      max-width: 100%;
      line-height: 24px;
      direction: ltr;
      user-select: text;
      white-space: pre-wrap;
      -webkit-user-modify: read-write-plaintext-only;
      overflow: auto;
      margin: 0;
      background-color: rgb(21, 32, 43);
      font-family: sans-serif;
      text-align: left;
   }
   
   #tweet:focus,input:focus {
      outline: 0;
      border-color: white;
   }
   #choose {
      border: 1px solid rgb(56, 68, 77);
      display: grid;
      width: 220px;
      height: 202px;
      overflow: auto;
      grid-auto-rows: 24px;
      border-radius: 4px;
      grid-template-columns: repeat(8,24px);
      grid-gap: 2px;
      padding: 2px;
   }
   
   body > div {
      margin: 4px;
      display: flex;
      flex-direction: column;
      padding-bottom: 40px;
      z-index: 1;
   }
   #choose span {
      cursor: pointer;
      padding: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   #choose .active {
      border: 1px solid rgb(56, 68, 77);
   }
   a {
      color: white;
   }
   select,input {
      border: 1px solid rgb(56, 68, 77);
      background: transparent;
      color: white;
      font: 20px sans-serif;
      margin-bottom: 4px;
      margin-top: 4px;
      text-align: center;
   }
   .horizontal {
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .vertical {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }
</style>
<div>
<small>．ｐａｌｅｔｔｅ．</small>
<select id='palette_select'></select>
<div id='choose'></div>
<small>．ｃｕｓｔｏｍ．</small>

<input id='choice_input'/>

</div>
<div><small>．ｍｏｎｏｓｐａｃｅ．</small><div id='grid'></div>
<small>．ｅｘａｍｐｌｅｓ．</small>
<select id='example_select'>
   <option disabled selected value=''>examples</option>
<option value="　　　　　　　　　
　　　　　　　　　
　　　　　　　　　
　　　　　　　　　
　　　　　　　　　
　　　　　　　　　
　　　　　　　　　
　　　　　　　　　
　　　　　　　　　">empty 9x9</option>
<option value="　　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　
　　　　　　　　　　　　　　">empty 14x9</option>
<option value="＊。．。．。．＊
．ｃｒｅａｔｅ．📝
。　ａｓｃｉｉ。　
．　ｅｍｏｊｉ．✨
。　　　ａｒｔ。🖼
．ｆｏｒ　　　．✨
。ｓｏｃｉａｌ。　
．　ｍｅｄｉａ．🕊
＊。．。．。．＊">description</option>
<option value="ノ／））ノヽ～
ツ　へ　　⌒（
～＼．　＼．＼
ノ＼　　⌒」｜
　ヽ　ヽ　　ノ
　　＼　　ノ　
　　　｜｜
　／￣￣￣￣＼">👤</option>
<option value="．＇．＇．＇．＇．
＇．＇．＇．＇．＇
．＇．＇．＇．＇．
＇．－－－－－．＇
．｜ｈａｐｐｙ｜｀
＇｜ｎｅｗ　　｜｀
．｜　ｙｅａｒ｜｀
＇．－－－－－．｀
．＇｀｀｀｀｀｀．">happy new year</option>
<option value="５３．￤．７．￤．．．
６．．￤１９５￤．．．
．９８￤．．．￤．６．
－－－＊－－－＊－－－
８．．￤．６．￤．．３
４．．￤８．３￤．．１
７．．￤．．２￤．．６
－－－＊－－－＊－－－
．６．￤．．．￤２８．
．．．￤４１９￤．．５
．．．￤．８．￤．７９">sudoku</option>
<option value="✨　　　　　　　　　．
　　　．　　✨　　　　
　　　　　　　　　🌙　
　✨　　　　　　　　　
　　　　☄　　　．　　
．　　　　　　　　　　
　　　　⛰　　　　．⛰
⛰　🏕　　　｀⛰　🌲｀
🌲｀　　　｀　　🦔　🌲">🏕</option>
<option value="．
　🌞　　☁　　．
☁　　　　　🌧
　　　．　　💧🌧

　🌴　　　　　💧
🌴　　　🌴　☔　🌲
🌊🏄🌊🏊🌊　🏃　🌲
🐟🌊🌊🌊🌊　　🌲🌲">🏃</option>
<option value="🌊🌊｀。🌾｀🌾　｀｀｀｀🌊🌊
🌊🌊。．．🌾．．．。．．．🌊
｀．．．🌳🐑．．　．🌳．．｀
　．🌳🌳．．．🛖．🌳🌳🌳．🌾
｀🌳🌳🌳．　🛖．．🌳🌳🌳．🌾
　．🌳🌳．．．⛰．．🌳．．🌊
🌊🌊．．🌳．⛰⛰⛰．　．🌊🌊
🌊🌊。｀｀⛰⛰⛰⛰⛰｀🌊🌊🌊">🏝</option>
<option value="🤡　　🟪🟪🟪
　🔵🟥🟪🟪🟪🟥🔵
　🟥⬜⚫⬜⚫⬜🟥
　🟥⬜⬜🔴⬜⬜🟥
　　⬜🟧🟧🟧⬜
　🟨🟢🟢🟢🟢🟢🟨
🟨🟨🟩🟩🟩🟩🟩🟨🟨
🟨🟩🟩🟩🟩🟩🟩🟩🟨
🟩🟩🟩🟩🟩🟩🟩🟩🟩">🤡</option>
<option value="兵兵兵兵兵兵兵兵兵
兵兵兵兵兵兵兵兵兵
兵乒兵　兵　兵　兵
　兵兵兵乒兵乓兵　
　乒兵乓乒　乓乓　
　　乒　乓　乓　　
　　　乒　乓　　　
丘丘丘丘丘丘丘丘丘
丘丘丘丘丘丘丘丘丘">戰爭交響曲</option>

</select></div>
<div><small>．ｐｒｅｖｉｅｗ．</small>
   <pre id='tweet'></pre>
   <small>．
   <a id='url' href='#' target="_blank">ｔｗｅｅｔ</a>．
   <a id='copy' href='#'>ｃｏｐｙ</a>．
   <a id='clear' href='#'>ｃｌｅａｒ</a>
   ．</small>
</div>
   <script>
      const palette = ['　', "０", "１", "２", "３", "４", "５", "６", "７", "８", "９", "Ａ", "Ｂ", "Ｃ", "Ｄ", "Ｅ", "Ｆ", "Ｇ", "Ｈ", "Ｉ", "Ｊ", "Ｋ", "Ｌ", "Ｍ", "Ｎ", "Ｏ", "Ｐ", "Ｑ", "Ｒ", "Ｓ", "Ｔ", "Ｕ", "Ｖ", "Ｗ", "Ｘ", "Ｙ", "Ｚ", "ａ", "ｂ", "ｃ", "ｄ", "ｅ", "ｆ", "ｇ", "ｈ", "ｉ", "ｊ", "ｋ", "ｌ", "ｍ", "ｎ", "ｏ", "ｐ", "ｑ", "ｒ", "ｓ", "ｔ", "ｕ", "ｖ", "ｗ", "ｘ", "ｙ", "ｚ", "：", "；", "＜", "＝", "＞", "？", "＠", "！", "＂", "＃", "＄", "％", "＆", "＇", "（", "）", "＊", "＋", "－", "，", "．", "｀", "／", "＼", "｜", "＾", "＿", "￢", "￣", "￤", "～", "［", "］", "｛", "｝", "｟", "｠", "￠", "￡", "￥", "￦"]
      const blocks = [
"─", "━", "│", "┃", "┄", "┅", "┆", "┇", "┈", "┉", "┊", "┋", "┌", "┍", "┎", "┏", "┐", "┑", "┒", "┓", "└", "┕", "┖", "┗", "┘", "┙", "┚", "┛", "├", "┝", "┞", "┟", "┠", "┡", "┢", "┣", "┤", "┥", "┦", "┧", "┨", "┩", "┪", "┫", "┬", "┭", "┮", "┯", "┰", "┱", "┲", "┳", "┴", "┵", "┶", "┷", "┸", "┹", "┺", "┻", "┼", "┽", "┾", "┿", "╀", "╁", "╂", "╃", "╄", "╅", "╆", "╇", "╈", "╉", "╊", "╋", "╌", "╍", "╎", "╏", "═", "║", "╒", "╓", "╔", "╕", "╖", "╗", "╘", "╙", "╚", "╛", "╜", "╝", "╞", "╟", "╠", "╡", "╢", "╣", "╤", "╥", "╦", "╧", "╨", "╩", "╪", "╫", "╬", "╭", "╮", "╯", "╰", "╱", "╲", "╳", "╴", "╵", "╶", "╷", "╸", "╹", "╺", "╻", "╼", "╽", "╾", "╿","▀", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█", "▉", "▊", "▋", "▌", "▍", "▎", "▏","▐", "░", "▒", "▓", "▔", "▕", "▖", "▗", "▘", "▙", "▚", "▛", "▜", "▝", "▞", "▟ "
      ]

      const misc = ['。', '「', '」', 'ツ', '囧', '冏', '⌒', 'へ', 'ヽ', 'ノ', '人', 'ㅅ', '金', '土', '火', '木', '水', '困', '森', '林', '山', '兵', '乒', '乓', '丘', '虎', '馬', '魚', '龍', '鬼', '龜', '兔', '鼠', '貓', '豬', '雞', '牛', '猴', '弓', '刀', '石', '海',
      ]

      const emoji = [{
              "name": "Full-Width",
              "emoji": palette
          },
          {
              "name": "Block",
              "emoji": blocks
          },
          {
              "name": "Misc",
              "emoji": misc
          },

          // emoji's based on data found here: unpkg.com/emoji.json@12.0.0/emoji.json
          {
             "name": "Smileys & Emotion",
             "emoji": ["😀","😃","😄","😁","😆","😅","🤣","😂","🙂","🙃","😉","😊","😇","🥰","😍","🤩","😘","😗","☺","😚","😙","😋","😛","😜","🤪","😝","🤑","🤗","🤭","🤫","🤔","🤐","🤨","😐","😑","😶","😏","😒","🙄","😬","🤥","😌","😔","😪","🤤","😴","😷","🤒","🤕","🤢","🤮","🤧","🥵","🥶","🥴","😵","🤯","🤠","🥳","😎","🤓","🧐","😕","😟","🙁","☹","😮","😯","😲","😳","🥺","😦","😧","😨","😰","😥","😢","😭","😱","😖","😣","😞","😓","😩","😫","🥱","😤","😡","😠","🤬","😈","👿","💀","☠","💩","🤡","👹","👺","👻","👽","👾","🤖","😺","😸","😹","😻","😼","😽","🙀","😿","😾","🙈","🙉","🙊","💋","💌","💘","💝","💖","💗","💓","💞","💕","💟","❣","💔","❤","🧡","💛","💚","💙","💜","🤎","🖤","🤍","💯","💢","💥","💫","💦","💨","🕳","💣","💬","👁️‍🗨️","🗨","🗯","💭","💤"
             ]
          },
          {
             "name": "People & Body",
             "emoji": ["👋","🤚","🖐","✋","🖖","👌","🤏","✌","🤞","🤟","🤘","🤙","👈","👉","👆","🖕","👇","☝","👍","👎","✊","👊","🤛","🤜","👏","🙌","👐","🤲","🤝","🙏","✍","💅","🤳","💪","🦾","🦿","🦵","🦶","👂","🦻","👃","🧠","🦷","🦴","👀","👁","👅","👄","👶","🧒","👦","👧","🧑","👱","👨","🧔","👱‍♂️","👨‍🦰","👨‍🦱","👨‍🦳","👨‍🦲","👩","👱‍♀️","👩‍🦰","👩‍🦱","👩‍🦳","👩‍🦲","🧓","👴","👵","🙍","🙍‍♂️","🙍‍♀️","🙎","🙎‍♂️","🙎‍♀️","🙅","🙅‍♂️","🙅‍♀️","🙆","🙆‍♂️","🙆‍♀️","💁","💁‍♂️","💁‍♀️","🙋","🙋‍♂️","🙋‍♀️","🧏","🧏‍♂️","🧏‍♀️","🙇","🙇‍♂️","🙇‍♀️","🤦","🤦‍♂️","🤦‍♀️","🤷","🤷‍♂️","🤷‍♀️","👨‍⚕️","👩‍⚕️","👨‍🎓","👩‍🎓","👨‍🏫","👩‍🏫","👨‍⚖️","👩‍⚖️","👨‍🌾","👩‍🌾","👨‍🍳","👩‍🍳","👨‍🔧","👩‍🔧","👨‍🏭","👩‍🏭","👨‍💼","👩‍💼","👨‍🔬","👩‍🔬","👨‍💻","👩‍💻","👨‍🎤","👩‍🎤","👨‍🎨","👩‍🎨","👨‍✈️","👩‍✈️","👨‍🚀","👩‍🚀","👨‍🚒","👩‍🚒","👮","👮‍♂️","👮‍♀️","🕵","🕵️‍♂️","🕵️‍♀️","💂","💂‍♂️","💂‍♀️","👷","👷‍♂️","👷‍♀️","🤴","👸","👳","👳‍♂️","👳‍♀️","👲","🧕","🤵","👰","🤰","🤱","👼","🎅","🤶","🦸","🦸‍♂️","🦸‍♀️","🦹","🦹‍♂️","🦹‍♀️","🧙","🧙‍♂️","🧙‍♀️","🧚","🧚‍♂️","🧚‍♀️","🧛","🧛‍♂️","🧛‍♀️","🧜","🧜‍♂️","🧜‍♀️","🧝","🧝‍♂️","🧝‍♀️","🧞","🧞‍♂️","🧞‍♀️","🧟","🧟‍♂️","🧟‍♀️","💆","💆‍♂️","💆‍♀️","💇","💇‍♂️","💇‍♀️","🚶","🚶‍♂️","🚶‍♀️","🧍","🧍‍♂️","🧍‍♀️","🧎","🧎‍♂️","🧎‍♀️","👨‍🦯","👩‍🦯","👨‍🦼","👩‍🦼","👨‍🦽","👩‍🦽","🏃","🏃‍♂️","🏃‍♀️","💃","🕺","🕴","👯","👯‍♂️","👯‍♀️","🧖","🧖‍♂️","🧖‍♀️","🧗","🧗‍♂️","🧗‍♀️","🤺","🏇","⛷","🏂","🏌","🏌️‍♂️","🏌️‍♀️","🏄","🏄‍♂️","🏄‍♀️","🚣","🚣‍♂️","🚣‍♀️","🏊","🏊‍♂️","🏊‍♀️","⛹","⛹️‍♂️","⛹️‍♀️","🏋","🏋️‍♂️","🏋️‍♀️","🚴","🚴‍♂️","🚴‍♀️","🚵","🚵‍♂️","🚵‍♀️","🤸","🤸‍♂️","🤸‍♀️","🤼","🤼‍♂️","🤼‍♀️","🤽","🤽‍♂️","🤽‍♀️","🤾","🤾‍♂️","🤾‍♀️","🤹","🤹‍♂️","🤹‍♀️","🧘","🧘‍♂️","🧘‍♀️","🛀","🛌","🧑‍🤝‍🧑","👭","👫","👬","💏","👩‍❤️‍💋‍👨","👨‍❤️‍💋‍👨","👩‍❤️‍💋‍👩","💑","👩‍❤️‍👨","👨‍❤️‍👨","👩‍❤️‍👩","👪","👨‍👩‍👦","👨‍👩‍👧","👨‍👩‍👧‍👦","👨‍👩‍👦‍👦","👨‍👩‍👧‍👧","👨‍👨‍👦","👨‍👨‍👧","👨‍👨‍👧‍👦","👨‍👨‍👦‍👦","👨‍👨‍👧‍👧","👩‍👩‍👦","👩‍👩‍👧","👩‍👩‍👧‍👦","👩‍👩‍👦‍👦","👩‍👩‍👧‍👧","👨‍👦","👨‍👦‍👦","👨‍👧","👨‍👧‍👦","👨‍👧‍👧","👩‍👦","👩‍👦‍👦","👩‍👧","👩‍👧‍👦","👩‍👧‍👧","🗣","👤","👥","👣"
             ]
          },
          {
             "name": "Animals & Nature",
             "emoji": ["🐵","🐒","🦍","🦧","🐶","🐕","🦮","🐕‍🦺","🐩","🐺","🦊","🦝","🐱","🐈","🦁","🐯","🐅","🐆","🐴","🐎","🦄","🦓","🦌","🐮","🐂","🐃","🐄","🐷","🐖","🐗","🐽","🐏","🐑","🐐","🐪","🐫","🦙","🦒","🐘","🦏","🦛","🐭","🐁","🐀","🐹","🐰","🐇","🐿","🦔","🦇","🐻","🐨","🐼","🦥","🦦","🦨","🦘","🦡","🐾","🦃","🐔","🐓","🐣","🐤","🐥","🐦","🐧","🕊","🦅","🦆","🦢","🦉","🦩","🦚","🦜","🐸","🐊","🐢","🦎","🐍","🐲","🐉","🦕","🦖","🐳","🐋","🐬","🐟","🐠","🐡","🦈","🐙","🐚","🐌","🦋","🐛","🐜","🐝","🐞","🦗","🕷","🕸","🦂","🦟","🦠","💐","🌸","💮","🏵","🌹","🥀","🌺","🌻","🌼","🌷","🌱","🌲","🌳","🌴","🌵","🌾","🌿","☘","🍀","🍁","🍂","🍃"
             ]
          },
          {
             "name": "Food & Drink",
             "emoji": ["🍇","🍈","🍉","🍊","🍋","🍌","🍍","🥭","🍎","🍏","🍐","🍑","🍒","🍓","🥝","🍅","🥥","🥑","🍆","🥔","🥕","🌽","🌶","🥒","🥬","🥦","🧄","🧅","🍄","🥜","🌰","🍞","🥐","🥖","🥨","🥯","🥞","🧇","🧀","🍖","🍗","🥩","🥓","🍔","🍟","🍕","🌭","🥪","🌮","🌯","🥙","🧆","🥚","🍳","🥘","🍲","🥣","🥗","🍿","🧈","🧂","🥫","🍱","🍘","🍙","🍚","🍛","🍜","🍝","🍠","🍢","🍣","🍤","🍥","🥮","🍡","🥟","🥠","🥡","🦀","🦞","🦐","🦑","🦪","🍦","🍧","🍨","🍩","🍪","🎂","🍰","🧁","🥧","🍫","🍬","🍭","🍮","🍯","🍼","🥛","☕","🍵","🍶","🍾","🍷","🍸","🍹","🍺","🍻","🥂","🥃","🥤","🧃","🧉","🧊","🥢","🍽","🍴","🥄","🔪","🏺"
             ]
          },
          {
             "name": "Travel & Places",
             "emoji": ["🌍","🌎","🌏","🌐","🗺","🗾","🧭","🏔","⛰","🌋","🗻","🏕","🏖","🏜","🏝","🏞","🏟","🏛","🏗","🧱","🏘","🏚","🏠","🏡","🏢","🏣","🏤","🏥","🏦","🏨","🏩","🏪","🏫","🏬","🏭","🏯","🏰","💒","🗼","🗽","⛪","🕌","🛕","🕍","⛩","🕋","⛲","⛺","🌁","🌃","🏙","🌄","🌅","🌆","🌇","🌉","♨","🎠","🎡","🎢","💈","🎪","🚂","🚃","🚄","🚅","🚆","🚇","🚈","🚉","🚊","🚝","🚞","🚋","🚌","🚍","🚎","🚐","🚑","🚒","🚓","🚔","🚕","🚖","🚗","🚘","🚙","🚚","🚛","🚜","🏎","🏍","🛵","🦽","🦼","🛺","🚲","🛴","🛹","🚏","🛣","🛤","🛢","⛽","🚨","🚥","🚦","🛑","🚧","⚓","⛵","🛶","🚤","🛳","⛴","🛥","🚢","✈","🛩","🛫","🛬","🪂","💺","🚁","🚟","🚠","🚡","🛰","🚀","🛸","🛎","🧳","⌛","⏳","⌚","⏰","⏱","⏲","🕰","🕛","🕧","🕐","🕜","🕑","🕝","🕒","🕞","🕓","🕟","🕔","🕠","🕕","🕡","🕖","🕢","🕗","🕣","🕘","🕤","🕙","🕥","🕚","🕦","🌑","🌒","🌓","🌔","🌕","🌖","🌗","🌘","🌙","🌚","🌛","🌜","🌡","☀","🌝","🌞","🪐","⭐","🌟","🌠","🌌","☁","⛅","⛈","🌤","🌥","🌦","🌧","🌨","🌩","🌪","🌫","🌬","🌀","🌈","🌂","☂","☔","⛱","⚡","❄","☃","⛄","☄","🔥","💧","🌊"
             ]
          },
          {
             "name": "Activities",
             "emoji": ["🎃","🎄","🎆","🎇","🧨","✨","🎈","🎉","🎊","🎋","🎍","🎎","🎏","🎐","🎑","🧧","🎀","🎁","🎗","🎟","🎫","🎖","🏆","🏅","🥇","🥈","🥉","⚽","⚾","🥎","🏀","🏐","🏈","🏉","🎾","🥏","🎳","🏏","🏑","🏒","🥍","🏓","🏸","🥊","🥋","🥅","⛳","⛸","🎣","🤿","🎽","🎿","🛷","🥌","🎯","🪀","🪁","🎱","🔮","🧿","🎮","🕹","🎰","🎲","🧩","🧸","♠","♥","♦","♣","♟","🃏","🀄","🎴","🎭","🖼","🎨","🧵","🧶"
             ]
          },
          {
             "name": "Objects",
             "emoji": ["👓","🕶","🥽","🥼","🦺","👔","👕","👖","🧣","🧤","🧥","🧦","👗","👘","🥻","🩱","🩲","🩳","👙","👚","👛","👜","👝","🛍","🎒","👞","👟","🥾","🥿","👠","👡","🩰","👢","👑","👒","🎩","🎓","🧢","⛑","📿","💄","💍","💎","🔇","🔈","🔉","🔊","📢","📣","📯","🔔","🔕","🎼","🎵","🎶","🎙","🎚","🎛","🎤","🎧","📻","🎷","🎸","🎹","🎺","🎻","🪕","🥁","📱","📲","☎","📞","📟","📠","🔋","🔌","💻","🖥","🖨","⌨","🖱","🖲","💽","💾","💿","📀","🧮","🎥","🎞","📽","🎬","📺","📷","📸","📹","📼","🔍","🔎","🕯","💡","🔦","🏮","🪔","📔","📕","📖","📗","📘","📙","📚","📓","📒","📃","📜","📄","📰","🗞","📑","🔖","🏷","💰","💴","💵","💶","💷","💸","💳","🧾","💹","💱","💲","✉","📧","📨","📩","📤","📥","📦","📫","📪","📬","📭","📮","🗳","✏","✒","🖋","🖊","🖌","🖍","📝","💼","📁","📂","🗂","📅","📆","🗒","🗓","📇","📈","📉","📊","📋","📌","📍","📎","🖇","📏","📐","✂","🗃","🗄","🗑","🔒","🔓","🔏","🔐","🔑","🗝","🔨","🪓","⛏","⚒","🛠","🗡","⚔","🔫","🏹","🛡","🔧","🔩","⚙","🗜","⚖","🦯","🔗","⛓","🧰","🧲","⚗","🧪","🧫","🧬","🔬","🔭","📡","💉","🩸","💊","🩹","🩺","🚪","🛏","🛋","🪑","🚽","🚿","🛁","🪒","🧴","🧷","🧹","🧺","🧻","🧼","🧽","🧯","🛒","🚬","⚰","⚱","🗿"
             ]
          },
          {
             "name": "Symbols",
             "emoji": ["🏧","🚮","🚰","♿","🚹","🚺","🚻","🚼","🚾","🛂","🛃","🛄","🛅","⚠","🚸","⛔","🚫","🚳","🚭","🚯","🚱","🚷","📵","🔞","☢","☣","⬆","↗","➡","↘","⬇","↙","⬅","↖","↕","↔","↩","↪","⤴","⤵","🔃","🔄","🔙","🔚","🔛","🔜","🔝","🛐","⚛","🕉","✡","☸","☯","✝","☦","☪","☮","🕎","🔯","♈","♉","♊","♋","♌","♍","♎","♏","♐","♑","♒","♓","⛎","🔀","🔁","🔂","▶","⏩","⏭","⏯","◀","⏪","⏮","🔼","⏫","🔽","⏬","⏸","⏹","⏺","⏏","🎦","🔅","🔆","📶","📳","📴","♀","♂","⚕","♾","♻","⚜","🔱","📛","🔰","⭕","✅","☑","✔","✖","❌","❎","➕","➖","➗","➰","➿","〽","✳","✴","❇","‼","⁉","❓","❔","❕","❗","〰","©","®","™","#️⃣","*️⃣","0️⃣","1️⃣","2️⃣","3️⃣","4️⃣","5️⃣","6️⃣","7️⃣","8️⃣","9️⃣","🔟","🔠","🔡","🔢","🔣","🔤","🅰","🆎","🅱","🆑","🆒","🆓","ℹ","🆔","Ⓜ","🆕","🆖","🅾","🆗","🅿","🆘","🆙","🆚","🈁","🈂","🈷","🈶","🈯","🉐","🈹","🈚","🈲","🉑","🈸","🈴","🈳","㊗","㊙","🈺","🈵","🔴","🟠","🟡","🟢","🔵","🟣","🟤","⚫","⚪","🟥","🟧","🟨","🟩","🟦","🟪","🟫","⬛","⬜","◼","◻","◾","◽","▪","▫","🔶","🔷","🔸","🔹","🔺","🔻","💠","🔘","🔳","🔲"
             ]
          },
          {
             "name": "Flags",
             "emoji": ["🏁","🚩","🎌","🏴","🏳","🏳️‍🌈","🏴‍☠️","🇦🇨","🇦🇩","🇦🇪","🇦🇫","🇦🇬","🇦🇮","🇦🇱","🇦🇲","🇦🇴","🇦🇶","🇦🇷","🇦🇸","🇦🇹","🇦🇺","🇦🇼","🇦🇽","🇦🇿","🇧🇦","🇧🇧","🇧🇩","🇧🇪","🇧🇫","🇧🇬","🇧🇭","🇧🇮","🇧🇯","🇧🇱","🇧🇲","🇧🇳","🇧🇴","🇧🇶","🇧🇷","🇧🇸","🇧🇹","🇧🇻","🇧🇼","🇧🇾","🇧🇿","🇨🇦","🇨🇨","🇨🇩","🇨🇫","🇨🇬","🇨🇭","🇨🇮","🇨🇰","🇨🇱","🇨🇲","🇨🇳","🇨🇴","🇨🇵","🇨🇷","🇨🇺","🇨🇻","🇨🇼","🇨🇽","🇨🇾","🇨🇿","🇩🇪","🇩🇬","🇩🇯","🇩🇰","🇩🇲","🇩🇴","🇩🇿","🇪🇦","🇪🇨","🇪🇪","🇪🇬","🇪🇭","🇪🇷","🇪🇸","🇪🇹","🇪🇺","🇫🇮","🇫🇯","🇫🇰","🇫🇲","🇫🇴","🇫🇷","🇬🇦","🇬🇧","🇬🇩","🇬🇪","🇬🇫","🇬🇬","🇬🇭","🇬🇮","🇬🇱","🇬🇲","🇬🇳","🇬🇵","🇬🇶","🇬🇷","🇬🇸","🇬🇹","🇬🇺","🇬🇼","🇬🇾","🇭🇰","🇭🇲","🇭🇳","🇭🇷","🇭🇹","🇭🇺","🇮🇨","🇮🇩","🇮🇪","🇮🇱","🇮🇲","🇮🇳","🇮🇴","🇮🇶","🇮🇷","🇮🇸","🇮🇹","🇯🇪","🇯🇲","🇯🇴","🇯🇵","🇰🇪","🇰🇬","🇰🇭","🇰🇮","🇰🇲","🇰🇳","🇰🇵","🇰🇷","🇰🇼","🇰🇾","🇰🇿","🇱🇦","🇱🇧","🇱🇨","🇱🇮","🇱🇰","🇱🇷","🇱🇸","🇱🇹","🇱🇺","🇱🇻","🇱🇾","🇲🇦","🇲🇨","🇲🇩","🇲🇪","🇲🇫","🇲🇬","🇲🇭","🇲🇰","🇲🇱","🇲🇲","🇲🇳","🇲🇴","🇲🇵","🇲🇶","🇲🇷","🇲🇸","🇲🇹","🇲🇺","🇲🇻","🇲🇼","🇲🇽","🇲🇾","🇲🇿","🇳🇦","🇳🇨","🇳🇪","🇳🇫","🇳🇬","🇳🇮","🇳🇱","🇳🇴","🇳🇵","🇳🇷","🇳🇺","🇳🇿","🇴🇲","🇵🇦","🇵🇪","🇵🇫","🇵🇬","🇵🇭","🇵🇰","🇵🇱","🇵🇲","🇵🇳","🇵🇷","🇵🇸","🇵🇹","🇵🇼","🇵🇾","🇶🇦","🇷🇪","🇷🇴","🇷🇸","🇷🇺","🇷🇼","🇸🇦","🇸🇧","🇸🇨","🇸🇩","🇸🇪","🇸🇬","🇸🇭","🇸🇮","🇸🇯","🇸🇰","🇸🇱","🇸🇲","🇸🇳","🇸🇴","🇸🇷","🇸🇸","🇸🇹","🇸🇻","🇸🇽","🇸🇾","🇸🇿","🇹🇦","🇹🇨","🇹🇩","🇹🇫","🇹🇬","🇹🇭","🇹🇯","🇹🇰","🇹🇱","🇹🇲","🇹🇳","🇹🇴","🇹🇷","🇹🇹","🇹🇻","🇹🇼","🇹🇿","🇺🇦","🇺🇬","🇺🇲","🇺🇳","🇺🇸","🇺🇾","🇺🇿","🇻🇦","🇻🇨","🇻🇪","🇻🇬","🇻🇮","🇻🇳","🇻🇺","🇼🇫","🇼🇸","🇽🇰","🇾🇪","🇾🇹","🇿🇦","🇿🇲","🇿🇼","🏴󠁧󠁢󠁥󠁮󠁧󠁿","🏴󠁧󠁢󠁳󠁣󠁴󠁿","🏴󠁧󠁢󠁷󠁬󠁳󠁿"
             ]
          }
         
      ]
   </script>
   
   <script>

      function init(h, v, should_render) {

          clear.onclick = () => {
              for (j = 0; j < v; j++) {
                  for (i = 0; i < h; i++) {
                      document.querySelectorAll('#grid span')[i + j * h].innerText = palette[0]
                  }
              }
              render();
              example_select.value = ''
          }
          copy.onclick = () => {
              navigator.clipboard.writeText(tweet.innerText)
          }

          function render() {
              let txt = ''
              for (j = 0; j < v; j++) {
                  for (i = 0; i < h; i++) {
                      txt += document.querySelectorAll('#grid span')[i + j * h].innerText
                  }
                  txt += "\n"
              }
              tweet.innerText = txt.replaceAll(/　+\n/g, "\n")
              update_url()
          }

          function update_url() {
              url.setAttribute('href', 'https://twitter.com/intent/tweet?text=' + encodeURI(tweet.innerText))
          }




          const empty = palette[0]
          grid.innerHTML = ''
          grid.style.gridTemplateColumns = `repeat(${h},24px)`
          grid.style.gridTemplateRows = `repeat(${v},24px)`

          for (j = 0; j < v; j++) {
              for (i = 0; i < h; i++) {
                  grid.appendChild(el = document.createElement('span'));
                  el.innerText = empty;
                  el.onclick = function() {
                      this.innerText = this.innerText === choice ? empty : choice;
                      render()
                  }
                  el.oninput = function(e) {
                     if (!e.data || e.data === ' ') {
                          this.innerText = empty
                      } else {
                          const inp = e.data.charCodeAt(0) - 31;
                          this.innerText = to_full_width(e.data)
                      }
                      if (this.nextSibling) {
                          this.nextSibling.focus()
                      } else {
                          this.parentElement.children[0].focus()
                      }
                      render();
                  }
              }
          }

          tweet.oninput = () => {
              const txt = tweet.innerText
              const nw = Math.max(...txt.split("\n").map(x => [...x].length))
              const nh = txt.split("\n").length;

              init(nw, nh);

              [...document.querySelectorAll('#grid span')].forEach(x => x.innerText = empty)

              txt.split("\n").forEach((x, j) => {
                  if (!x.length) {
                      return
                  } [...x].forEach((char, i) => {
                      (document.querySelectorAll('#grid span')[i + j * nw] || {}).innerText = char
                  })
              });
              update_url()
          }


          if (should_render) {
              render()
          }
      }

      let choice = '．'
      choice_input.value = choice
      choice_input.onchange = x => {
         choice_input.value = choice = to_full_width(choice_input.value) || palette[0];
         (document.querySelector('.active') || {}).className = '';
      }

      function switch_palette(value) {
          choose.innerHTML = ''
          emoji.forEach(cat => {
              if (value === cat.name) {
                  cat.emoji.forEach(x => {
                      choose.appendChild(el = document.createElement('span'))
                      el.innerText = x
                      el.onclick = function() {
                          (document.querySelector('.active') || {}).className = '';
                          choice = this.innerText;
                          choice_input.value = choice
                          this.className = 'active';
                      }
                  })
              }
          })
      }
      switch_palette("Full-Width")
      emoji.forEach(cat => {
          palette_select.innerHTML += `<option>${cat.name}</option>`
      })
      palette_select.oninput = () => switch_palette(palette_select.value)

      example_select.oninput = (x) => {
          tweet.innerHTML = x.target.value;
          tweet.oninput()
      }
      
      function to_full_width(char){
         const inp = char.charCodeAt(0) - 31;
         return (inp < 256) ? String.fromCharCode(65279 + (inp)) : char;
      }

      init(9, 9, true)
</script>